<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="../EXT4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
href="../css/style.css" />
<script type="text/javascript" src="../EXT4/ext-all.js"></script>
<script type="text/javascript" src="../script/ext-lang-zh_CN.js"></script>

<script type="text/javascript">
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
var pageSize = 10;
window.onresize = function(){
    setTimeout(function(){panel.setWidth(Ext.getDom("studentlist").width);},100);
};

Ext.onReady(function() {
	Ext.QuickTips.init();
	
	var header = Ext.create('Ext.form.FieldSet',{
        title: '查询条件',
        collapsible: true,
        defaultType: 'textfield',
        layout: 'hbox',
        items :[{
            fieldLabel: '课程名:',
            id: 'query',
            labelWidth:50,
            width:200,
            margin:'0 10 0 0',
        }]
    })
	
	Ext.define('Subject', { 
        extend: 'Ext.data.Model', 
        fields: ['id','displayName','price','description','semesters','lesson'] 
    });  
	
	Ext.define('Semester', { 
        extend: 'Ext.data.Model', 
        fields: ['id','semester'] 
    });
	
	var semesterstate = [{'id':'1','semester':'第一学期'},
	                     {'id':'2','semester':'第二学期'},
	                     {'id':'3','semester':'第三学期'},
	                     {'id':'4','semester':'第四学期'}];
	
	var semesterstore=Ext.create('Ext.data.Store', {
        autoDestroy: true,
        model: 'Semester',
        data: semesterstate
    });
	
	var subject_store = Ext.create('Ext.data.Store', {
		model: 'Subject', 
        autoLoad: true,
        pageSize: pageSize,
        proxy: { 
            type: 'ajax', 
            url: '../service/subject_allsub',
            reader: { 
                type: 'json', 
                root: 'subvos',
                total: 'total'
            }
        }
	});
	
	var content = Ext.create('Ext.grid.Panel',{
	    valueField: 'id',
	    width: '50%',
	    id: 'subject_grid',
	    tbar: [{
			xtype:'button',
			text:'查询',
			handler: function() {
				var query = Ext.getCmp('query').getValue();
				query = escape(query);
				subject_store.loadPage(1,{ params:{'query':query} })
			}
		},{
	    	xtype:'button',
	    	text: '添加',
	    	handler: function() {
	    		subject_form.getForm().reset();
						
				edit_win.show();
	    	}
	    }],
	    dockedItems: [{ 
	        xtype: 'pagingtoolbar', 
	        store: subject_store,
	        dock: 'bottom', 
	        displayInfo: true 
	     }],
	    columns:[{
	    	text: '课程名',  dataIndex: 'displayName', width:'30%'
	    },{
	    	text: '价格',  dataIndex: 'price', width:'15%'
	    },{
	    	text: '描述',  dataIndex: 'description', width:'10%'
	    },{
	    	text: '学期',  dataIndex: 'semesters', width:'15%'
	    },{
	    	text: '课程数',  dataIndex: 'lesson', width:'15%'
	    },{
			xtype: 'actioncolumn',
			text: '操作',
			width:'15%',
			items: [{
				icon   : '../EXT4/fam/cross.gif"',
				handler: function(grid, rowIndex, colIndex) {
					var rec = subject_store.getAt(rowIndex);
					Ext.MessageBox.confirm("确认","确认删除课程:"+rec.get('displayName'),function(btn){
						if(btn=='yes'){
							Ext.Ajax.request({
								url : '../service/subject_delete',
								params : {
									'subjectid': rec.get('id')
								},
								success:function(response, opts){
									Ext.Msg.alert('提示',Ext.decode(response.responseText).msg);
									subject_store.load();
								},failure:function(form, action) {
				    				Ext.Msg.alert('提示',Ext.decode(response.responseText).msg);
				    			}
							});
						}
					});
				}
			},{
				icon   : '../EXT4/fam/cog_edit.png"',
				handler: function(grid, rowIndex, colIndex) {
					var rec = subject_store.getAt(rowIndex);
					subject_form.getForm().reset();
						
					edit_win.show();
					
					subject_form.loadRecord(rec);
					Ext.Ajax.request({
		       		    url: '../service/subject_findbyid',
		       		    params: {
		       		        subjectid: rec.data.id
		       		    },
		       		    success: function(response, opts) {
		       		        var obj = Ext.decode(response.responseText);
		       		        console.log(obj);
		       		        Ext.getCmp('semester').setValue(semesterstore.getAt(obj.subject.semester-1).data.semester);
		       		        Ext.getCmp('msemester').setValue(obj.subject.semester);
		       		    },
		       		});
				}
			}]
		}],
	    store: subject_store
	});
	
	var subject_form = Ext.create('Ext.form.Panel',{
	    id: 'subject_form',
	    frame: true,
	    layout: 'vbox',
	    items:[{
	    	xtype: 'container',
	    	layout: 'hbox',
	    	align: 'stretch',
	    	height: 30,
	    	defaults: {
	    		xtype: 'textfield',
	    		labelWidth:90,
	    		margin: '0 20 0 0'
	    	},
	    	items:[{
	    		hidden: true,
	    		name: 'subject.id',
	    		id: 'id'
	    	},{
	        	fieldLabel: '课程名',
	        	name: 'subject.displayName',
	        	id: 'displayName',
	        	afterLabelTextTpl: required,
				allowBlank: false,
	        },{
	        	fieldLabel: '价格（元）',
	        	name: 'subject.price',
	        	id: 'price',
	        	afterLabelTextTpl: required,
				allowBlank: false,
	        },{
	        	fieldLabel: '描述',
	        	name: 'subject.description',
	        	id: 'description',
	        	afterLabelTextTpl: required,
				allowBlank: false,
	        }]
	    },{
	    	xtype: 'container',
	    	layout: 'hbox',
	    	align: 'stretch',
	    	defaults: {
	    		xtype: 'textfield',
	    		labelWidth:70,
	    		margin: '0 20 0 0'
	    	},
	    	items:[{
	    		hidden: true,
	    	},{
	    		id: 'semester',
	        	afterLabelTextTpl: required,
	            fieldLabel: '学期',
	            xtype:'combobox',
	            store:semesterstore,
	            valueField:'id',
	            queryMode: 'local',
	            editable:false,
	            displayField: 'semester',
	            allowBlank: false,
	            listeners: {
        	    	select: function(comb, records) {
        	    		Ext.each(records, function(record) {
        	    			Ext.getCmp('msemester').setValue(record.data.id);
        	    		});
        	    	}
        	    }
	        },{
	        	id: 'msemester',
	        	name: 'subject.semester',
	        	hidden: true
	        },{
	        	id: 'lesson',
	        	afterLabelTextTpl: required,
	            fieldLabel: '课程数',
	            name: 'subject.lesson',
	            xtype: 'numberfield',
	            minValue: 1,
	            maxValue: 100,
	            allowBlank: false,
	            value: 24
	        }]
	    }],
	    buttons:[{
	    	xtype: 'button',
	    	text: '确定',
	    	handler: function() {			
				Ext.getCmp('subject_form').submit({
					url:'../service/subject_add',
	            	method: 'POST',
	    			success:function(form, action) {
	    				subject_form.getForm().reset();
	    				subject_store.load();
	    				edit_win.close();
	    			},failure:function(form, action) {
	    				Ext.Msg.alert('提示',action.result.msg);
	    			}
				});
			}
	    }]
    })
	
	var edit_win = Ext.create('Ext.window.Window',{
    	modal:true,
    	title: '课程信息',
    	resizable: false,
    	closeAction: 'hide',
    	items:[subject_form]
    });
    
	panel=Ext.create('Ext.Panel', {
        id:'main-panel',
        baseCls:'x-plain',
        renderTo:'subjectmng',
        items:[header,content]
	});
});	
</script>
</head>
<body>
	<div id="subjectmng"></div>
</body>
</html>